<template>
    <div class="right">
        {user.name ? (
        <Dropdown overlay={menu}>
            <span :style="{color: theme == 'dark' ? '#FFFFFF' : '#001528' }">
            <Avatar
                    size="small"
                    class="avatar"
                    icon='user'
                    alt="avatar"
            />
            <span :style="{color: theme == 'dark' ? '#FFFFFF' : '#001528' }">{{user.name}}</span>
            </span>
            <Menu class="menu">
                <Item key="userCenter">
                    <Icon type="user"/>个人设置
                </Item>
                <Item key="password">
                    <Icon type="setting"/>密码修改
                </Item>
                <Divider/>
                <Item key="logout">
                    <Icon type="logout"/>退出系统
                </Item>
            </Menu>
        </Dropdown>

        <Spin size="small" style='margin-left: 8px; margin-right: 8px'/>

    </div>
</template>

<script>
    import {Dropdown, Menu} from 'ant-design-vue/types';
    const Item = Menu.Item;
    const Divider = Menu.Divider;
    export default {
        name: "RightContent",
        comments: {
            Dropdown,
            Menu,
            Item,
            Divider
        }
    }
</script>

<style scoped>

</style>